<template>
  <div class="info-wrapper">
    <div class="header">
      <div class="title-wrapper">
        <img
          src="@/assets/icons/home_live_item_left_icons.webp"
          alt="left decoration"
          class="decor-img"
        />
        <div class="title">
          <img src="@/assets/icons/home-info-recommend.webp" class="bg" />
          <h2>赛事推荐</h2>
        </div>

        <img
          src="@/assets/icons/home_live_item_right_icons.webp"
          alt="right decoration"
          class="decor-img"
        />
      </div>
      <div class="tabs">
        <button
          v-for="(tab, index) in tabs"
          :key="tab"
          :class="{ active: index === activeTab }"
          @click="() => setActiveTab(index)"
        >
          {{ tab.plan }}
        </button>
      </div>
      <div class="list">
        <div :class="['card']" v-for="(val, index) in list" :key="val.id" v-show="index <= 10" @click="() => goDetail(val.prophecyId)">
          <div class="card-header">
            <img class="profile-img" :src="val.headImgUrl" alt="Profile Image" />
            <div class="expert-info">
              <div class="expert-details">
                <div>
                  <span class="expert-name">{{ val.nickname }}</span>
                  <span class="professional-tag">专业玩家</span>
                </div>

                <div class="time-info">
                  <span>9分钟前</span>
                </div>
              </div>
            </div>
            <div class="streak-info">
              <span class="streak" v-show="val.continuousRed > 0">{{ val.continuousRed }}连红</span>
              <span class="streak-record">{{ val.sumCount }}中{{ val.winCount }}</span>
            </div>
          </div>
          <div class="card-body">
            <div class="match-info">
              <div class="match-time">{{ val.leagueName }} {{ val.matchTime }}</div>
              <div class="match-teams">{{ val.hostTeamName }} vs {{ val.guestTeamName }}</div>
            </div>
            <div class="view-button">
              <button>查看</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getInfoList } from '@/api/home'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeTab = ref(0)
const list = ref([])
const tabs = ref([
  { plan: '热门方案', filter: 1 },
  { plan: '足球方案', filter: 2 },
  { plan: '篮球方案', filter: 3 },
  { plan: '五大联赛', filter: 4 },
  { plan: '竞彩方案', filter: 5 },
  { plan: '免费方案', filter: 6 }
])
const setActiveTab = (index) => {
  activeTab.value = index
  getData()
}
onMounted(() => {
  getData()
})
const goDetail = (id) => {
  router.push(`/info/${id}`)
}
const getData = async () => {
  try {
    const res = await getInfoList({
      labelType: tabs.value[activeTab.value].filter
    })
    if (res.code === 200) {
      list.value = res.data.list
    }
  } catch (error) {
    console.log(error, 'error')
  }
}
</script>
<style lang="scss" scoped>
.info-wrapper {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .title-wrapper {
      display: flex;
      align-items: center;
      //   background-image: url('background-image.jpg'); /* 背景图片 */
      //   background-size: cover;
      //   background-position: center;
      //   padding: 10px 20px;
      //   border-radius: 10px;
      width: 100%;
      padding: 90px 0 40px;
      //   max-width: 800px;
      //   position: relative;

      .title {
        position: relative;
        display: flex;
        align-content: center;
        justify-content: center;
        margin: 0 15px;

        .bg {
          width: 340px;
          height: 58px;
          position: relative;
          top: -20px;
        }
        h2 {
          // font-size: 24px;
          //   margin: 0 10px;
          // color: white; /* 文字颜色根据背景图片调整 */
          z-index: 1;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 600;
          font-size: 40px;
          color: #525a79;
          position: absolute;
          bottom: 0;
          &::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 50%;
            margin-left: -30px;
            width: 60px;
            height: 10px;
            background: linear-gradient(150deg, #2cea3d 16%, #22d13c 49%, #17b33b 100%);
            box-shadow: 0px 4px 8px 0px rgba(0, 255, 10, 0.25);
            border-radius: 8px 8px 8px 8px;
          }
        }
      }
      .decor-img {
        // width: 20px; /* 根据需要调整图片大小 */
        height: auto;
        width: 515px;
        flex: 1;
      }
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin: 10px 0;

      button {
        // padding: 10px 15px;
        border: none;
        border-radius: 20px;
        // background-color: #f5f5f5;
        cursor: pointer;
        outline: none;
        font-size: 16px;
        background: url('@/assets/icons/home_live_item_btn_bg.webp') no-repeat;
        width: 120px;
        height: 40px;
        background-size: 100% 100%;
        color: #525a79;
        // cursor: pointer;
        &.active {
          background: url('@/assets/icons/home_live_active_item_btn_bg.webp') no-repeat;
          background-size: 100% 100%;
          color: #ffffff;
        }
      }
    }

    .more-button {
      background: none;
      //   border: none;
      color: #949cbd;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      width: 160px;
      height: 38px;
      background: url('@/assets/icons/home_live_item_more_btn.webp') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
  }
  .list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
    min-height: 200px;
  }
  .card {
    cursor: pointer;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    // overflow: hidden;
    // margin: 20px;
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 306px;
    height: 122px;
    box-sizing: border-box;
    // padding: ;
    background: url('@/assets/icons/home_info_bg.webp') no-repeat;
    background-size: 100% 100%;
    &.highlighted {
      background: url('@/assets/icons/home_info_active_bg.webp') no-repeat;
      background-size: 100% 100%;
    }
    &:hover {
      background: url('@/assets/icons/home_info_active_bg.webp') no-repeat;
      background-size: 100% 100%;
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    padding: 12px;
    // background: linear-gradient(90deg, #e0f7ff, #e6fffa);

    .profile-img {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .expert-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .expert-details {
        display: flex;
        flex-direction: column;

        .expert-name {
          font-weight: 400;
          font-size: 14px;
          color: #327efd;
          //   margin-bottom: 5px;
          margin-right: 6px;
        }

        .professional-tag {
          font-weight: 400;
          font-size: 12px;
          color: #16b13a;
          //   width: 60px;
          //   height: 20px;
          background: #c0f2cf;
          border-radius: 10px 10px 10px 10px;
          //   border-radius: 5px;
          padding: 0px 5px;
          height: 20px;
          line-height: 20px;
        }
      }

      .time-info {
        font-size: 12px;
        color: #888;
      }
    }

    .streak-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .streak {
        font-size: 12px;

        color: #e95d5d;
        // background: #ffe0e0;

        // padding: 2px 5px;
        margin-bottom: 2px;
      }

      .streak-record {
        color: #e95d5d;
        font-size: 10px;
        background: #f5d4d4;
        border-radius: 10px;
        padding: 2px 5px;
      }
    }
  }

  .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;

    .match-info {
      .match-time {
        font-weight: 400;
        font-size: 12px;
        color: #525a79;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
      }

      .match-teams {
        font-weight: 500;
        font-size: 14px;
        color: #525a79;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
      }
    }

    .view-button {
      button {
        // background: #28a745;
        color: #fff;
        border: none;
        // border-radius: 5px;
        // padding: 5px 10px;
        cursor: pointer;
        font-weight: 400;
        font-size: 14px;
        color: #525a79;
        background: none;
        &:hover {
          //   background: #218838;
        }
      }
    }
  }
}
</style>
